<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../assets/css/base.css">
    <style>
        .box{
            width: 500px;
        }
        .box img{
            width: 100%;
        }
    </style>
</head>
<body>

    <div class="box" v-html="info"></div>
    <!-- 非标准书写方式 => html具有强大的容错性  -->
    <div class=box v-html=info></div>
    <div class="box a" v-html="info"></div>
    <div class=box a v-html=info></div>

    <div id="app">
        <pre class="note">
        vue 提供指令语法，指令语法可以在特殊场景中补充插值表达式无法实现功能，
            同时指令可以扩展了对DOM特殊操作行为；
        vue 的指令和插值表达式在vue语法中的操作都是调用已经写好的方法，完成特殊功能执行；

        语法：Vue指令以 v-名称 结构定义
        位置：指令只能被用于 html 容器的标签属性上　＜标签 v-指令="" ＞＜/标签＞
        指令取值：
            + 对数据操作的指令而言，指令取值等同于插值表达式【数据仓库变量|匿名变量|JS表达式|js内置对象】
        </pre>
        <!-- <div>info:{{ info }}</div> -->
        <h4>v-html指令-通过调用DOM的innerHTML属性完成解析标签的执行操作-会替换标签中已存在的数据值的</h4>
        <div class="box" v-html="info"></div>
        <h4>v-text指令-通过调用DOM的textContent属性完成解析标签的执行操作-会替换标签中已存在的数据值的</h4>
        <!-- <div>已存在的内容：{{ str }}</div>
        <div>{{ '已存在的内容：'+str }}</div> -->
        <div v-text=" str ">已存在的内容</div>
        <div v-text="'已存在的内容:' + str"></div>
    </div>
    <script type="module">
        import { createApp } from "../assets/vue3/vue.esm-browser.js";
        createApp({
            // ES6 的对象定义简写模式
            data(){
                return {
                    info: "\u003Cp style=\"text-align: center;\"\u003E\u003Cimg src=\"https://oa.itany.com/itmupload/1645663883070.jpg\" title=\"图⽚无法加载\" alt=\"图⽚无法加载\"/\u003E\u003C/p\u003E\u003Cp style=\"text-align: center;\"\u003E\u003Cbr/\u003E\u003C/p\u003E\u003Cp style=\"text-align: center;\"\u003E\u003Cstrong\u003E\u003Cspan style=\"font-size: 20px;\"\u003E热烈欢迎无锡中科软信息技术有限公司莅临我校招聘人才\u003C/span\u003E\u003C/strong\u003E\u003C/p\u003E\u003Cp\u003E\u003Cbr/\u003E\u003C/p\u003E\u003Cp style=\"margin: 0px 0px 25px; text-indent: 0px; line-height: 150%; background: rgb\u0028255, 255, 255\u0029; text-align: center;\"\u003E\u003Cspan style=\"font-family: 宋体;color: rgb\u002851, 51, 51\u0029;letter-spacing: 0;font-size: 16px\"\u003E\u003Cspan style=\"font-family:宋体\"\u003E无锡中科软信息技术有限公司创立于\u003C/span\u003E\u003Cspan style=\"font-family:宋体\"\u003E2005年，由原中科院软件所和江苏中科软件改制重组而成。公司长期专注于电子政务应用软件及整体解决方案的研发和服务，是国内领先的电子政务应用软件开发服务商，是政府认定的“江苏省软件企业”、“江苏省民营高新技术企业”、“双软企业”，公司先后通过质量管理体系ISO9001、信息安全管理ISO27001、IT服务管理体系ISO20000、软件能力成熟度模型CMMI ML3级等国际标准的资质认证。\u003C/span\u003E\u003C/span\u003E\u003C/p\u003E\u003Cp style=\"margin: 0px 0px 25px; text-indent: 0px; line-height: 150%; background: rgb\u0028255, 255, 255\u0029; text-align: center;\"\u003E\u003Cspan style=\"font-family: 宋体;color: rgb\u002851, 51, 51\u0029;letter-spacing: 0;font-size: 16px\"\u003E\u003Cspan style=\"font-family:宋体\"\u003E公司自主研发的产品先后获得计算机软件著作权\u003C/span\u003E\u003Cspan style=\"font-family:宋体\"\u003E39项、江苏省优秀软件“金慧奖”1项、科技部创新项目1项、发明专利1项、在报发明专利2项。\u003C/span\u003E\u003C/span\u003E\u003C/p\u003E\u003Cp style=\"text-align: center;\"\u003E\u003Cbr/\u003E\u003C/p\u003E",
                    str: "aaaa\nbbbb\ncccc",
                    classStr:"a"
                }
            }
        }).mount("#app");
    </script>
</body>
</html>